<template>
	<view class="content">
		<topSearch :city="cityObj" type="0" v-if="isShow"></topSearch>
		<view class="banner">
			<swiper class="swiper" circular="true" :indicator-dots="false" :autoplay="autoplay" @change="topSwiperTab"
				:current="topSwiperIndex">
				<swiper-item v-for="(item,index) in topSwiper" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
			<!-- 自定义指示点dots -->
			<view class="dots">
				<text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
			</view>
		</view>
		<view class="nav_box">
			<view class="nav_box_item" v-for="(item,index) in nav_list" :key="index"
				:style="{'marginBottom':index<4?'29rpx':'0rpx'}" @click="moldMechanism(item)">
				<view>
					<image :src="item.url" mode=""></image>
				</view>
				<view>{{item.categoryTitle}}</view>
			</view>
		</view>
		<view class="boutique_recommendation">
			<view class="title">
				<image src="../../static/img/bq.png" mode=""></image>
				<text>今日精品课程</text>
			</view>
			<view class="recommendation_box">
				<view class="recommendation_item" @click="goRecommendation(0)">
					<view class="recommendation_title">
						热搜加盟
					</view>
					<view class="recommendation_logo">
                       <image src="../../static/img/img01.jpg" mode="widthFix"></image>
					</view>
					<view class="recommendation_text active1">
						教育品牌
					</view>
				</view>
				<view class="recommendation_item active" @click="goRecommendation(1)">
					<view class="recommendation_title">
						热销榜
					</view>
					<view class="recommendation_logo">
                       <image src="../../static/img/img02.jpg" mode="widthFix"></image>
					</view>
					<view class="recommendation_text active2">
						严选好课
					</view>
				</view>
				<view class="recommendation_item" @click="goRecommendation(2)">
					<view class="recommendation_title">
						精选推荐
					</view>
					<view class="recommendation_logo">
                     <image src="../../static/img/img03.webp" mode="widthFix"></image>
					</view>
					<view class="recommendation_text active3">
						精品课程
					</view>
				</view>

			</view>
			<!-- <view class="noData" v-else>
				找不到相关数据
			</view> -->
			<view class="seckill_box">
				<view class="seckill_lf">
					<view style="font-size: 32rpx;font-weight: bold;color: #fff;">
						限时秒杀
					</view>
					<view style="font-size: 24rpx;font-weight: 500;color: #fff;margin:29rpx 0;">
						好课限量 抢到即赚到
					</view>
					<view class="seckill_btn" @click="goSeckill">
						<text>转发得积分</text>
						<uni-icons type="arrowright" size="15" color="#F8623C"></uni-icons>
					</view>
				</view>
				<view class="seckill_rt">
					<view class="seckill_top">
						<view class="seckill_title">
							<text>一元速砍</text>
							<text style="text-align: center;">最多八刀</text>
						</view>
						<view class="seckill_title_name">
							我取好课 君取好礼
						</view>
						<view class="seckill_title_btn" @click="goKJFun">
							<text>极速砍价</text>
							<uni-icons type="arrowright" size="15" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="seckill_bt">
						<view class="seckill_title">
							<text>全程团</text>
							<text
								style="background: linear-gradient(90deg, #4FC863, #61E677);text-align: center;">立即成团</text>
						</view>
						<view class="seckill_title_name">
							平台领积分
						</view>
						<view class="seckill_title_btn" style="background-color: #FEB621;" @click="gogroupWork">
							<text>参与拼团</text>
							<uni-icons type="arrowright" size="15" color="#fff"></uni-icons>
						</view>
					</view>
				</view>

			</view>
			<view class="chamber_commerce">
				<swiper class="swiper" style="height: 181rpx;" circular="true" :autoplay="autoplay" :interval="interval"
					:duration="duration" @change="change">
					<swiper-item class="chamber-box" v-for="(item,index) in recruitmentTeam" :key="index">
						<view class="swiper-item">

							<image src="../../static/img/lq.png" mode=""></image>
							<view class="swper_center">
								<view>{{item.mechanismTitle}}</view>
								<view>{{item.mechanismAddress}}</view>
							</view>
							<view class="click_in" @click="recruitmentView">
								点击进入
							</view>
						</view>
					</swiper-item>

				</swiper>
				<swiper-dot class="dot" :current="current" :list="recruitmentTeam"></swiper-dot>
			</view>
		</view>
		<view class="special_recommendation" v-if="specialRecommendation.length">
			<view class="special_title">
				<text>特别推荐</text>
				<view @click="goMore">
					<text>更多</text>
					<uni-icons type="arrowright" size="15" color="#666666"></uni-icons>
				</view>
			</view>
			<view class="special_list">
				<view class="special_list_item" v-for="(item,index) in specialRecommendation"
					:class="{'active':(index+1)%3==0}" :key="index" @click="getDetail(item.id)">
					<image :src="item.url" mode=""></image>
					<view class="special_img_bt">
						<view>
							{{item.shopTitle}}
							<image src="../../static/img/re.png" mode=""></image>
						</view>
						<view class="">
							{{item.shopCategory}}
						</view>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import swiperDot from '../component/swiperDot.vue';
	import topSearch from "../component/topSearch.vue"
	import amap from '../../comment/amap-wx.js';
	import QQMapWX from "../../comment/qqmap-wx-jssdk.js"
    import City from "../../static/js/cityCopy.js"
	export default {
		data() {
			return {
				isShow: true,
				title: 'Hello',
				search: "",
				background: ['color1', 'color2', 'color3'],
				topSwiper: [],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				topSwiperIndex: 0,
				duration: 1000,
				current: 0,
				nav_list: [],
				cityObj: {}, //当前城市
				recommendation_list: [],
				specialRecommendation: [], //特别推荐
				recruitmentTeam: [], //招生团队
				token: uni.getStorageSync('token'),
				qqmapsdk: {},
				city:{},//City实例
			}
		},
		components: {
			swiperDot,
			topSearch
		},
		onLoad() {
          this.city=new City();
		  console.log(this.city)

		},
		onShow() {
			let that = this;
			that.isShow = false;
			that.$nextTick(function() {
				that.isShow = true;
			})

			if (uni.getStorageSync('cityChange')) {
				this.cityObj = JSON.parse(uni.getStorageSync('cityChange'));
				console.log(this.cityObj)
				this.cityCode = this.cityObj.code;
				this.homeNav();
				this.recruitmentTeamFun()
				this.mechanismPage()
			} else {
				this.qqmapsdk = new QQMapWX({
					key: 'URZBZ-U3PW3-INY3R-YNE2K-4UP5Z-6YFUI'
				});
				this.getAuthorizeInfo()
			}

		},
		methods: {
			// 位置授权
			getAuthorizeInfo() {
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getLocationInfo();
					},
					fail() { // 拒绝授权
						that.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res);
						uni.showLoading({
							title: '获取信息中'
						});
						that.qqmapsdk.reverseGeocoder({
							location:{
									latitude: res.latitude,
									longitude: res.longitude
								},
							success: (data) => {
								console.log(data)
								let ad_info=data.result.ad_info
								that.addressName =ad_info.city;
								let cityArr=that.city.cityObjs.filter((a)=>{
									return a.city.indexOf(that.addressName)!=-1;
								})
								
								let cityCode =cityArr[0].code;
								that.cityObj = {
									city: that.addressName,
									code: cityCode
								}
								uni.setStorageSync('cityChange', JSON.stringify(that.cityObj));
								uni.setStorageSync('city', JSON.stringify(that.cityObj));
								that.cityCode = that.cityObj.code;
								that.homeNav();
								that.recruitmentTeamFun()
								that.mechanismPage()
								that.isShow = false;
								that.$nextTick(function() {
									that.isShow = true;
								})
								uni.hideLoading();
							},
							fail(err) { //就是这个  
								console.log('err', err)
							}
						});
					},
					fail(err) {
						console.log(err)
					}
				});
			},

			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
			//今日精品
			goRecommendation(num) {
				uni.navigateTo({
					url: '../home/educationBrand?id=' + num
				});
			},
			//类型入口
			moldMechanism(item) {
				if (item.categoryTitle != '其他') {
					uni.navigateTo({
						url: '../home/fineArts?id=' + item.id + '&title=' + item.categoryTitle
					});
				} else {
					uni.navigateTo({
						url: '../home/otherView?id=' + item.id + '&title=' + item.categoryTitle
					});
				}

			},
			//特别推荐更多
			goMore() {
				uni.navigateTo({
					url: '../home/recommendationMore'
				});
			},
			//进入特别推荐详情
			getDetail(id) {
				uni.navigateTo({
					url: '../subjectSub/curriculum?id=' + id
				});
			},
			//秒杀
			goSeckill() {
				uni.navigateTo({
					url: '../home/limitedKill'
				});
			},
			//参与拼团
			gogroupWork() {
				uni.navigateTo({
					url: '../home/wholeCityRegiment'
				});
			},
			//商会列表
			recruitmentView() {
				uni.navigateTo({
					url: '../home/brandInvestment'
				});
			},
			//跳转砍价
			goKJFun() {
				console.log('跳转')
				uni.navigateTo({
					url: '../home/helpChop'
				});
			},
			topSwiperTab(e) {
				var that = this;
				this.topSwiperIndex = Number(e.target.current);
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/index'
				});
			},
			change(e) {
				this.current = e.detail.current;
			},
			//导航接口
			homeNav() {
				this.topSwiper = [];
				this.$http.get(`/api/dream/home/${this.cityCode}`).then((data) => {
					console.log(data)
					if (data.data.code == 200) {
						if (data.data.result) {
							let res = data.data.result;
							let imageUrl = data.data.imageUrl;
							let arr = res.bannerUrl || [];
							this.nav_list = res.categoryEntityList || []; //首页类型
							this.nav_list.forEach((a, i) => {
								a.url = imageUrl + '' + a.categoryIcon
							});
							this.specialRecommendation = res.specialRecommendation || [];
							this.specialRecommendation.forEach((a, i) => {
								a.url = imageUrl + '' + a.shopCover
							})
							console.log(imageUrl)
							arr.forEach((a) => {
								this.topSwiper.push(imageUrl + a);

							})

							console.log(this.topSwiper)
						}
					} else {
						uni.showToast({
							title: data.data.message,
							duration: 2000
						});
					}
				})
			},
			//精品课程
			mechanismPage(type) {
				this.$http.get('/api/dream/mechanismPage', {
					areaCode: this.cityCode,
					name: "",
					pageRow: 1,
					pageSize: 3,
					pageType: type
				}).then((data) => {
					if (data.data.code == 200) {

					}
				})
			},
			//招生团队
			recruitmentTeamFun() {
				this.$http.get(`/api/dream/recruitmentTeam/1/${this.cityCode}`, {

				}).then((data) => {
					if (data.data.code == 200) {
						if (data.data.result) {
							this.recruitmentTeam = data.data.result.records || []
						}

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/index.scss'
</style>
